<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html style='overflow-x: hidden;'>
<head>
<meta charset="utf-8" />
<meta name=viewport content="width=device-width,initial-scale=1, user-scalable=0">
<title>使用时长</title>
<link rel="stylesheet"
	href="${ctxStatic}/jiujiudevice/css/public.css?v=6" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js?v=6"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js?v=6"></script>
<style>
table {
	width: 100%;
	line-height: 20px;
	color: #666666;
	padding-left: 15px;
}

.title {
	font-size: 11px;
}

td {
	border-bottom: 1px #EEEEEE dashed;
}

.context {
	font-size: 12px;
	color: #999999;
}

.list {
	line-height: 20px;
	background: #FFFFFF;
	margin-bottom: 16px;
	border-top: 1px #eee solid;
	display: flex;
	justify-content: space-around;
	padding: 10px 0;
	color: #666666;
}

.list li {
	text-align: center;
	border-right: 1px #eee solid;
	flex: 1;
}

.list li:last-child {
	border: 0;
}

.list li p:last-child {
	color: #00DA81;
}
</style>
<script type="text/javascript"
	src="${ctxStatic}/jiujiudevice/js/jquery-1.9.1.min.js"></script>
<c:if test="${not empty message }">
	<script type="text/javascript">
		alert("${message}");
	</script>
</c:if>

<c:if test="${not empty order}">
	<script type="text/javascript">
		$(function() {
			$("#devicelist").click(function() {
				$("#deviceContent").toggle();
			})
		})
		function toFixed(number, fractionDigits) {
			var times = Math.pow(10, fractionDigits);
			var roundNum = Math.round(number * times) / times;
			return roundNum.toFixed(fractionDigits);
		}		
		/* function toDecimal2(x) {
			var f = parseFloat(x);
			if (isNaN(f)) {
				return false;
			}
			var f = Math.round(x * 100) / 100;
			var s = f.toString();
			var rs = s.indexOf('.');
			if (rs < 0) {
				rs = s.length;
				s += '.';
			}
			while (s.length <= rs + 2) {
				s += '0';
			}
			return s;
		} */
		function time2string(millisecond) {

			//定义day天  ， hour 小时，minute 分钟，second 秒
			var day, hour, minute, second;
			if (millisecond > (1000 * 60 * 60 * 24)) {
				day = Math.floor(millisecond / (1000 * 60 * 60 * 24));
				millisecond = millisecond % (1000 * 60 * 60 * 24);
			}

			if (millisecond > (1000 * 60 * 60)) {
				hour = Math.floor(millisecond / (1000 * 60 * 60));
				if (hour < 10) {
					hour = "0" + hour;
				}
				millisecond = millisecond % (1000 * 60 * 60);
			} else {
				hour = '00';
			}
			if (millisecond > (1000 * 60)) {
				minute = Math.floor(millisecond / (1000 * 60));
				if (minute < 10) {
					minute = "0" + minute;
				}
				millisecond = millisecond % (1000 * 60);
			} else {
				minute = '00';
			}
			if (millisecond > (1000)) {
				second = Math.floor(millisecond / (1000));
				if (second < 10) {
					second = "0" + second;
				}
			} else {
				//增强用户体验，本地服务器响应慢  可能会耽误一秒左右
				second = '01';
			}
			if (day) {
				$(".use-time").html(
						day + '天' + hour + ':' + minute + ':' + second);
			} else {
				$(".use-time").html(hour + ':' + minute + ':' + second);
			}
			//返回字符串
		}
		/* setInterval(sysn, 1000);
		if(deviceType == "1"){
			//如果是加墨设备，执行此定时器
			setInterval(sysnt, 5000);
		} */
	</script>

</c:if>

</head>
<body style="background: #f6f6f6;overflow-x: hidden;" v-cloak>
	<div id="app">
	<c:if test="${empty order }">
			<div class="fade" style="overflow: scroll;" id="tip">
				<div class="alert">
					<p class="alert-title">墨盒数据</p>

					<!-- 墨盒数据 -->
					<c:if test="${not empty inkList  }">
						<div class="p-top">
							<div>
								<div id="deviceContent">
									<table>
										<tr class="title">
											<td>路线</td>
											<td>墨盒</td>
											<td>单价</td>
											<td>当前重量</td>
										</tr>
										<tr class="title">
											<td>(路)</td>
											<td>(颜色)</td>
											<td>(元/g)</td>
											<td>(g)</td>
										</tr>
										<c:forEach items="${inkList }" var="ink">
											<tr class="context">
												<td>${ink.id }</td>
												<td>${ink.flag }</td>
												<td>${ink.price }</td>
												<td>${ink.value }</td>
											</tr>
										</c:forEach>
										

									</table>
								</div>
							</div>
						</div>
					</c:if>
					<!-- 墨盒数据 -->
					<p
						style="height: 30px; line-height: 15px; text-align: center; font-size: 13px;">点击确认后将开始计费，确认开始吗？</p>
					<div class="box flx-center button">
						<button class="h2"
							onclick="location.href='${ctxFront }/jiujiudevice/quitUseDevice?deviceSn=${device.sn }'">取消</button>
						<button class="h2" style="color: #FC495A;"
							onclick="showMinTip()">确定</button>
					</div>
				</div>
			</div>
		</c:if>
		
		<!-- 提示用户多少秒不计费 -->
		<div class="fade" style="overflow: scroll;display:none" id="freeTime">
				<div class="alert">
					<p class="alert-title">温馨提示</p>
					<p
						style="height: 30px; line-height: 15px; text-align: center; font-size: 13px;">该设备将在<font style="color:#FC495A">${free.min}</font>秒内不计费</p>
					<div class="box flx-center button">
						<button class="h2"  id="no">取消</button>
						<button class="h2" id="yes" style="color: #FC495A;">确定</button>
					</div>
				</div>
		</div>
		
		<!-- 提醒用户是否关闭设备 -->
		<div class="fade" style="overflow: scroll;display:none" id="deviceClose">
				<div class="alert">
					<p class="alert-title">温馨提示</p>
					<p style="height: 30px; line-height: 15px; text-align: center; font-size: 13px;">您确定要关闭当前设备吗?</p>
					<div class="box flx-center button">
						<button class="h2"  id="noclose">取消</button>
						<button class="h2" id="close" style="color: #FC495A;">确定</button>
					</div>
				</div>
		</div>
		<div class="use-top" style="margin-bottom: 0; position: relative;">
			<p class="use-time" id="use-time">00:00:00</p>
			<p>已使用时长</p>
			<p style="margin-top: 10px; color: red;">
				<span style="margin-right: 10px;">${order.companyName }</span>${order.deviceName }</p>
		</div>
		<div>
			<ul class="list">
				<li>
					<p>设备金额</p>
					<p class="device-money">{{deviceMoney|numFilter}}元</p>

				</li>
				<c:if test="${deviceType == 1}">
				<li>
					<p>墨盒金额</p>
					<p class="device-money" v-if='inkMoney'>{{inkMoney|numFilter}}元</p>
					<p class="device-money" v-else>0.00元</p>
				</li>
				</c:if>
				<li v-for='(item,index) in otherAttr'>
					<p>{{item.name}}金额</p>
					<p class="device-money" v-if='item.value'>{{item.value|numFilter}}元</p>
					<p class="device-money" v-else>0.00元</p>
				</li>
			</ul>
		</div>
		<div class="p-top"  v-for="(items,index) in inkMessage">
		
		
			<div v-for="(itemA,indexA) in items.datalist">			
				<p class="p-title box flex-between">
					<span>时间{{itemA.currentTime}}</span> <span><i
						style="color:red;" v-if="itemA.inkStatus==1">加墨</i>
						<i
						style="color:#00DA81;" v-else>使用</i>
						</span>
				</p>
				<div id="deviceContent" >
					<table>
						<tr class="title">
							<td>路线</td>
							<td>墨盒</td>
							<td>单价</td>
							<td>初始重量</td>
							<td>当前重量</td>
							<td>使用重量</td>
							<td>消费金额</td>
						</tr>
						
						<tr class="context" v-for="(itemb,indexb) in itemA.datalist">						
							<td>{{itemb.id}}路</td>
							<td>{{itemb.flag}}</td>
							<td>{{itemb.price|numFilter}}元/g</td>
							<td>{{itemb.preValue}}g</td>
							<td>{{itemb.value}}g</td>
							<td>{{itemb.useValue}}g</td>
							<td>{{itemb.useMoney|numFilter}}元</td>
						</tr> 					
					</table>
				</div>
			</div>
			<div>
				<p class="p-moeny h2">
					<span style="font-size: 13px; padding-left: 10px;">总合计</span> <span
						style="font-size: 13px; padding-left: 10px;" v-if='items.submoney'>{{items.submoney|numFilter}}元</span>
						<span
						style="font-size: 13px; padding-left: 10px;" v-else>0.00元</span>
				</p>
			</div>
		</div>
		<div class="btn-again">
			<button class="btn-login" onclick="closeDevice()">结束当前设备使用</button>
		</div>
		<div class="btn-again" onclick="scanCode()">
			<button class="btn-login">扫一扫使用其他设备</button>
		</div>


	</div>
	<script type="text/javascript">
		$("#show-ink-detail")
				.click(
						function() {
							window.location.href = "${ctxFront }/jiujiudevice/fenduanFrontDetail?sn=${order.deviceSn }&r="
									+ Math.random();
						})
	</script>
	<script type="text/javascript"
		src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript">
		wx.config({
			debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId : "${weChatAppId}", // 必填，公众号的唯一标识
			timestamp : "${timestamp}", // 必填，生成签名的时间戳
			nonceStr : "${nonceStr}", // 必填，生成签名的随机串
			signature : "${signature}",// 必填，签名，见附录1
			jsApiList : [ 'scanQRCode' ]
		// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});
		wx.error(function(res) {
		})
	</script>
	<c:if test="${empty noCashRecord }">
		<script type="text/javascript">
			function scanCode() {
				wx
						.scanQRCode({
							needResult : 1,// 默认为0，扫描结果由微信处理，1则直接返回扫描结果
							scanType : [ "qrCode", "barCode" ],
							success : function(res) {
								var result = res.resultStr;
								location.href = "${ctxFront }/jiujiudevice/usedevice?deviceSn="
										+ result + "&r=" + Math.random();
							},
							fail : function(res) {
								console.log(res)
								alert(JSON.stringify(res));

							}
						});
			}
		</script>
	</c:if>
	<c:if test="${not empty noCashRecord }">
		<script type="text/javascript">
			function scanCode() {

				alert("您还未交押金，将自动跳转到押金支付。");
				location.href = "${ctxFront }/jiujiudevice/jiaoyajin";
			}
		</script>
	</c:if>



	<script>
		var timer = new Number("${timer}");
		var price = "${orderLog.devicePrice}";
		var inkMoney = "${orderLog.inkMoney}";
		inkMoney = parseFloat(inkMoney);
		//拼接其他消费记录
		var otherMessage = JSON.parse('${orderLog.otherMessage}'); 
		//得到设备类型，区分页面
		var deviceType = "${deviceType}";
		
		//设备限免秒数
		var free = parseInt("${free.min}");
		var app = new Vue({
			el : '#app',
			data : {
				deviceMoney : '0.00',
				inkMoney : '0.00',
				otherAttr : [],
				starTime:'',
				inkStatus:'',
				inkMessage:[]
			},
			created : function() {
				var _this=this
				setInterval(this.sysn, 1000);
				console.log(deviceType)
				var time=1000
				if (deviceType == "1") {
					//如果是加墨设备，执行此定时器				
					/* setInterval(this.sysnt, time); */
					setInterval(function(){
						var url='${ctxFront}/jiujiudevice/fenduanFrontData?sn=${order.deviceSn }'
							console.log('sysnt')		
							axios.get(url).then(function(res){	
								if(res.data.r){
									app.inkMessage=res.data.l;							
								}						
							})
						var url2 = '${ctxFront}/jiujiudevice/updateUseTime?sn=${order.deviceSn }'
						axios.get(url2).then(function(res){	
							app.inkMoney=res.data.inkMoney;	
							inkMoney = app.inkMoney;
												
						})
						console.log(time)
							
				    },time)
				    time=5000
				}
			},
			filters: {
				  numFilter:function(val){

				   val = val.toString().replace(/\$|\,/g,'');
			    if(isNaN(val)) {
			        val = "0";  
			      } 
			      let sign = (val == (val = Math.abs(val)));
			      val = Math.floor(val*100+0.50000000001);
			      let cents = val%100;
			      val = Math.floor(val/100).toString();
			      if(cents<10) {
			         cents = "0" + cents
			      }
			      for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
			          val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
			      }

			      return (((sign)?'':'-') + val + '.' + cents);
				  }

				},
			methods : {
				sysn : function() {
					this.timeMoeny(timer, inkMoney, otherMessage);
					time2string(timer);
					console.log(timer);
					timer += 1000;
				},
				timeMoeny : function(millisecond,inkMoney, otherMessage) {
					var min;
			       
					var second = Math.floor(millisecond/1000);
					console.log("secod="+second);
					
					if (millisecond > (1000 * 60)) {
						min = Math.floor(millisecond / (1000 * 60));
						millisecond = millisecond % (1000 * 60);
					}
				
					if (!min) {
						min = 0;
					}
					
					if (millisecond > 0) {
						min += 1;
					}
					
					if(second <= free){
						app.deviceMoney = price * 0;
						app.inkMoney = 0;
						otherMessage.forEach(function(item, index){
							item.value = item.price * 0
						})
					}else{
						app.deviceMoney = price * min;
						app.inkMoney = inkMoney;
						otherMessage.forEach(function(item, index){
							item.value = item.price * min
						})
					}
					
					app.otherAttr = otherMessage
				}
			}
			
		})
		
	</script>
	
	<script>
	
	function showMinTip(){
		$("#freeTime").show();
		$("#tip").hide();
		$("#deviceClose").hide();
	}
	

		
	$("#yes").click(function(){
			window.location.href='${ctxFront }/jiujiudevice/opendevice?deviceSn=${device.sn }'
	})
	$("#no").click(function(){
			$("#freeTime").hide();
			$("#tip").show();
			$("#deviceClose").hide();
	})
	
	function  closeDevice(){
		//提示显示
		$("#deviceClose").show();
		$("#close").click(function(){
			location.href='${ctxFront }/jiujiudevice/closedevice?deviceSn=${order.deviceSn }'
		})
		$("#noclose").click(function(){
			$("#deviceClose").hide();
		})
	}
	onclick=""

	</script>
</body>


</html>
